<?php

/* @var $this yii\web\View */
use yii\helpers\Html;
use yii\helpers\Url;
use app\models\NeaZoushi;
use yii\widgets\ActiveForm;
use app\assets\EchartsAsset;
EchartsAsset::register($this);
$this->title = '基金走势图';
if($this->context->curUserIsAdmin){
    $total = Yii::$app->db->createCommand('SELECT sum(nea_count) as nea_total,sum(usd_count) as usd_total FROM member WHERE status=1 and can_login=1 and id <>'.Yii::$app->user->getId())
 ->queryOne();
 }
?>
<div class="page-title">
  <div class=''>
    <h1><i class="fa fa-area-chart"></i> 贝恩资本私募基金日交易走势</h1>
    <div class='nea-count'>
        <a class="nea-count-first" href="<?=Url::toRoute('site/usdcount')?>">
          <?=($this->context->curUserIsAdmin)?'会员个人账户金额':'个人账户金额'?> <i class="fa fa-dollar"></i>：<?php
          if($this->context->curUserIsAdmin){

            echo number_format(  $total['usd_total'],2);
          }else{
            echo Html::encode(number_format($this->context->user->usd_count,2));
          }
          ?>
        </a>
        <a class="nea-count-second" href="<?=Url::toRoute('site/neacount')?>">
          <?=($this->context->curUserIsAdmin)?'会员私募基金账户金额':'私募基金账户金额'?> <i class="fa fa-dollar"></i>：<?php
          if($this->context->curUserIsAdmin){
            echo number_format($total['nea_total'],2);
          }else{
            echo Html::encode(number_format($this->context->user->nea_count,2));
          }
          ?>
        </a>
    </div>
  </div>

</div>
<div class="row">
    <div class="card" id='card-container'>
    <div id="nea_zoushi"></div>
  </div>

</div>
<?php
if($this->context->curUserIsAdmin){
?>
<!-- Modal -->
<div class="modal fade" id="editkline" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header btn-warning">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"><i class="fa fa-area-chart"></i> 修改K线图日数据</h4>
      </div>
      <?php
      $model=new NeaZoushi;
      ?>
      <?php $form = ActiveForm::begin(); ?>
      <?= $form->field($model, 'id',['template'=>'{input}'])->hiddenInput() ?>
      <div class="modal-body">
            <div class='row'>
              <div class='col-md-6'>
                <?= $form->field($model, 'data_date')->widget(\yii\widgets\MaskedInput::className(), ['mask' =>'9999/99/99']) ?>
              </div>
              <div class='col-md-6'>
                <?= $form->field($model, 'data_open')->widget(\yii\widgets\MaskedInput::className(), ['mask' =>'(9{1,9}.9{1,2}|9{1,9})']) ?>
              </div>
            </div>
            <div class='row'>
              <div class='col-md-6'>
                <?= $form->field($model, 'data_close')->widget(\yii\widgets\MaskedInput::className(), ['mask' =>'(9{1,9}.9{1,2}|9{1,9})']) ?>
              </div>
              <div class='col-md-6'>
                <?= $form->field($model, 'data_lowest')->widget(\yii\widgets\MaskedInput::className(), ['mask' =>'(9{1,9}.9{1,2}|9{1,9})']) ?>
              </div>
            </div>
            <div class='row'>
              <div class='col-md-6'>
                <?= $form->field($model, 'data_highest')->widget(\yii\widgets\MaskedInput::className(), ['mask' =>'(9{1,9}.9{1,2}|9{1,9})']) ?>
              </div>
              <div class='col-md-6'>
                <?= $form->field($model, 'data_base')->widget(\yii\widgets\MaskedInput::className(), ['mask' =>'(0.09{0,3}|-0.09{0,3})']) ?>
              </div>
            </div>
            <div class='row'>
              <div class='col-md-6'>
                <?= $form->field($model, 'data_amount')->widget(\yii\widgets\MaskedInput::className(), ['mask' =>'(9{1,9}.9{1,2}|9{1,9})']) ?>
              </div>
            </div>

            <div class="animated-checkbox">
              <label class="semibold-text">
              <?= $form->field($model, 'is_fenhong_point')->checkbox(['label' => '<span class="label-text">作为分红账户划拨点</span>']) ?>
              </label>
            </div>
      </div>
      <div class="modal-footer">
        <?= Html::submitButton('提交', ['class' => 'btn btn-warning']) ?>
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      </div>
     <?php ActiveForm::end(); ?>
    </div>
  </div>
</div>

<?php
}
?>

<?php $this->beginBlock('echartsdraw') ?>
var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
var labelFont = 'bold 12px Sans-serif';
var myChart = echarts.init(document.getElementById('nea_zoushi'));
var rawData=
<?php
echo NeaZoushi::getNeazoushi();
 ?>
 ;

var dates = rawData.map(function (item) {
    return item[0];
});

var data = rawData.map(function (item) {
    return [+item[2], +item[3], +item[4], +item[5]];
});

var fh = rawData.map(function (item) {
    return item[1];
});
var volumns = rawData.map(function (item) {
    return item[6];
});


function zoomCompute(w,sw){
    if(w > (767)){
      var option = {
        title: {
                text: '交易人数（万）: <?=$this->context->sysConfig->jyrs?>     交易量（亿元）: <?=$this->context->sysConfig->jyl?>',
                left: 0,
                textStyle:{
                  color: '#666',
                  fontWeight: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize:'14px'
                }
            },
          legend: {
              data: ['日K','市盈率','MA5','MA10','MA15'],
              bottom:0
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  animation: false,
                  type: 'cross',
                  lineStyle: {
                      color: '#777',
                      width: 1,
                      opacity: 0.8
                  },
              },
              formatter:function(params,ticket,callback){
                if(params[0].seriesType==='candlestick')
                {
                  return dates[params[0].dataIndex]+'<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#f00;"></span>日K: <br>- 开盘: '
                  +params[0].value[1]+'<br>- 收盘: '
                  +params[0].value[2]+'<br>- 最高: '
                  +params[0].value[3]+'<br>- 最低: '
                  +params[0].value[4]+'<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#c23531;"></span>市盈率: '
                  +params[1].value+'<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#2f4554;"></span>MA5: '
                  +params[2].value+'<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#61a0a8;"></span>MA10: '
                  +params[3].value+'<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#d48265;"></span>MA15: '
                  +params[4].value+'<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#91c7ae;"></span>成交额: '
                  +params[5].value+'</div>';
                }else if(params[0].seriesType==='bar'){
                  return dates[params[1].dataIndex]+'<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#f00;"></span>日K: <br>- 开盘: '
                  +params[1].value[1]+'<br>- 收盘: '
                  +params[1].value[2]+'<br>- 最高: '
                  +params[1].value[3]+'<br>- 最低: '
                  +params[1].value[4]+'<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#c23531;"></span>市盈率: '
                  +params[2].value+'<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#2f4554;"></span>MA5: '
                  +params[3].value+'<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#61a0a8;"></span>MA10: '
                  +params[4].value+'<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#d48265;"></span>MA15: '
                  +params[5].value+'<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#91c7ae;"></span>成交额: '
                  +params[0].value+'</div>';
                }
              }
          },axisPointer: {
                  link: {xAxisIndex:'all'},

          },
          xAxis: [{
                  type: 'category',
                  data: dates,
                  scale: false,
                  boundaryGap : true,
                  axisLine: {onZero: false},
                  //axisLine: { lineStyle: { color: '#8392A5' } },
                  splitLine: {show: false},
                  splitNumber: 20,
                  min: 'dataMin',
                  max: 'dataMax',
                  axisPointer:{
                    z:-100,
                    label: {
                        shadowColor:'#fff',
                        backgroundColor: '#fff',
                        color:'#fff'
                    }
                  }
          },{
              type: 'category',
              gridIndex: 1,
              data:dates,
              scale: false,
              boundaryGap : true,
                      axisLine: {onZero: false},
                      axisTick: {show: false},
                      splitLine: {show: false},
                      axisLabel: {show: false},
                      splitNumber: 20,
                      min: 'dataMin',
                      max: 'dataMax',
                      axisPointer: {
                          show:true
                      }
                  }
          ],
          yAxis: [{
              scale: true,
              splitArea: {
                  show: true
              },
              min:<?=$this->context->sysConfig->k_min_y?>,
              max:<?=$this->context->sysConfig->k_max_y?>


          },{
                      scale: true,
                      gridIndex: 1,
                      splitNumber: 2,
                      axisLabel: {show: false},
                      axisLine: {show: false},
                      axisTick: {show: false},
                      splitLine: {show: false}
            }
          ],
          grid: [{
              left: '45px',
              right: '20px',
              height: '500px'
          },
          {
              left: '45px',
              right: '20px',
              top: '500px',
              height:'200px'
          },
          ],
          dataZoom: [
          {
              type: 'inside',
              xAxisIndex: [0, 1],
              start: 0,
              end: 100,
              minSpan:50,
          },{
            show:true,
            xAxisIndex:[0,1],
            type:'slider',
            top:'700px',
            start:0,
            end:100,
            minSpan:50
          }
          ],
          animation: false,
          series: [
              {
                  type: 'candlestick',
                  name: '日K',
                  dimensions: ['时间','开盘', '收盘', '最高', '最低'],
                  data: data,
                  itemStyle: {
                      normal: {
                          color: '#f00',
                          color0: '#008000',
                          borderColor: '#f00',
                          borderColor0: '#008000'
                      }
                  }

              },
              {
                  name: '市盈率',
                  type: 'line',
                  data: fh,
                  smooth: true,
                  showSymbol: false,
                  lineStyle: {
                      normal: {
                          width: 0
                      }
                  }
              },
              {
                  name: 'MA5',
                  type: 'line',
                  data: calculateMA(5, data),
                  smooth: true,
                  showSymbol: true,
                  lineStyle: {
                      normal: {
                          width: 1,
                          opacity: 0.5
                      }
                  }
              },
              {
                  name: 'MA10',
                  type: 'line',
                  data: calculateMA(10, data),
                  smooth: true,
                  showSymbol: true,
                  lineStyle: {
                      normal: {
                          width: 1,
                          opacity: 0.5
                      }
                  }
              },
              {
                  name: 'MA15',
                  type: 'line',
                  data: calculateMA(15, data),
                  smooth: true,
                  showSymbol: true,
                  lineStyle: {
                      normal: {
                          width: 1,
                          opacity: 0.5
                      }
                  }
              },{
                name: '成交额',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: volumns,
                label:{
                  normal:{
                    show:false
                  }
                }
             }
          ]
      };
      $("#nea_zoushi").css("width",document.body.clientWidth-sw-50);
      if(w < 992){    //500
        option.grid[0].height='300px';
        option.grid[1].top='380px';
        option.grid[1].height='50px';
        option.dataZoom[1].top='435px';
      }else if(w < 1200){   //600
        option.grid[0].height='400px';
        option.grid[1].top='480px';
        option.grid[1].height='50px';
        option.dataZoom[1].top='535px';
      }else{  //700,80(60+20)
        option.grid[0].height='450px';
        option.grid[1].top='530px';
        option.grid[1].height='100px';
        option.dataZoom[1].top='635px';
      }
      myChart.clear();
      myChart.setOption(option);
      myChart.resize();
    }else{ //400

      var option1 = {
        animation: false,
        color: colorList,
        title: {
            left: 'center',
            text: '交易人数（万）: <?=$this->context->sysConfig->jyrs?>     交易量（亿元）: <?=$this->context->sysConfig->jyl?>',
            textStyle:{
              color: '#666',
              fontWeight: 'normal',
              fontFamily: '微软雅黑',
              fontSize:'14px'
            }
        },
        legend: {
            top: 30,
            data: ['日K','市盈率','MA5','MA10','MA15']
        },
        tooltip: {
            triggerOn: 'none',
            transitionDuration: 0,
            confine: true,
            bordeRadius: 4,
            borderWidth: 1,
            borderColor: '#333',
            backgroundColor: 'rgba(255,255,255,0.9)',
            textStyle: {
                fontSize: 12,
                color: '#333'
            },
            position: function (pos, params, el, elRect, size) {
                var obj = {
                    top: 60
                };
                obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
                return obj;
            },
            formatter:function(params,ticket,callback){
                return dates[params[1].dataIndex]+'<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#f00;"></span>日K: <br>- 开盘: '
                +params[1].value[1]+'<br>- 收盘: '
                +params[1].value[2]+'<br>- 最高: '
                +params[1].value[3]+'<br>- 最低: '
                +params[1].value[4]+'<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#c23531;"></span>市盈率: '
                +params[2].value+'<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#2f4554;"></span>MA5: '
                +params[3].value+'<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#61a0a8;"></span>MA10: '
                +params[4].value+'<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#d48265;"></span>MA15: '
                +params[5].value+'<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#91c7ae;"></span>成交额: '
                +params[0].value+'</div>';
            }

        },
        axisPointer: {
            link: [{
                xAxisIndex: [0, 1]
            }]
        },
        dataZoom: [{
            type: 'slider',
            xAxisIndex: [0, 1],
            realtime: false,
            start: 20,
            end: 70,
            top: 65,
            height: 20,
            handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '120%'
        }, {
            type: 'inside',
            xAxisIndex: [0, 1],
            start: 40,
            end: 70,
            top: 30,
            height: 20
        }],
        xAxis: [{
            type: 'category',
            data: dates,
            boundaryGap : false,
            axisLine: { lineStyle: { color: '#777' } },
            axisLabel: {
                formatter: function (value) {
                    return echarts.format.formatTime('MM-dd', value);
                }
            },
            min: 'dataMin',
            max: 'dataMax',
            axisPointer: {
                show: true
            }
        }, {
            type: 'category',
            gridIndex: 1,
            data: dates,
            scale: true,
            boundaryGap : false,
            splitLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false},
            axisLine: { lineStyle: { color: '#777' } },
            splitNumber: 20,
            min: 'dataMin',
            max: 'dataMax',
            axisPointer: {
                type: 'shadow',
                label: {show: false},
                triggerTooltip: true,
                handle: {
                    show: true,
                    margin: 30,
                    color: '#B80C00'
                }
            }
        }],
        yAxis: [{
            scale: true,
            splitNumber: 2,
            axisLine: { lineStyle: { color: '#777' } },
            splitLine: { show: true },
            axisTick: { show: false },
            axisLabel: {
                inside: true,
                formatter: '{value}\n'
            },
            min:<?=$this->context->sysConfig->k_min_y?>,
            max:<?=$this->context->sysConfig->k_max_y?>
        }, {
            scale: true,
            gridIndex: 1,
            splitNumber: 2,
            axisLabel: {show: false},
            axisLine: {show: false},
            axisTick: {show: false},
            splitLine: {show: false}
        }],
        grid: [{
            left: 20,
            right: 20,
            top: 100,
            height: 200
        }, {
            left: 20,
            right: 20,
            height: 40,
            top: 330
        }],
        graphic: [{
            type: 'group',
            left: 'center',
            top: 70,
            width: 300,
            bounding: 'raw',
            children: [{
                id: 'MA5',
                type: 'text',
                style: {fill: colorList[1], font: labelFont},
                left: 0
            }, {
                id: 'MA10',
                type: 'text',
                style: {fill: colorList[2], font: labelFont},
                left: 'center'
            }, {
                id: 'MA20',
                type: 'text',
                style: {fill: colorList[3], font: labelFont},
                right: 0
            }]
        }],
        series: [{
            name: '成交额',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
                normal: {
                    color: '#7fbe9e'
                },
                emphasis: {
                    color: '#140'
                }
            },
            data: volumns
        }, {
            type: 'candlestick',
            name: '日K',
            dimensions: ['时间','开盘', '收盘', '最高', '最低'],
            data: data,
            itemStyle: {
                normal: {
                    color: '#ef232a',
                    color0: '#14b143',
                    borderColor: '#ef232a',
                    borderColor0: '#14b143'
                },
                emphasis: {
                    color: 'black',
                    color0: '#444',
                    borderColor: 'black',
                    borderColor0: '#444'
                }
            }
        },
        {
            name: '市盈率',
            type: 'line',
            data: fh,
            smooth: true,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 0
                }
            }
        },
        {
            name: 'MA5',
            type: 'line',
            data: calculateMA(5, data),
            smooth: true,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            }
        }, {
            name: 'MA10',
            type: 'line',
            data: calculateMA(10, data),
            smooth: true,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            }
        }, {
            name: 'MA15',
            type: 'line',
            data: calculateMA(15, data),
            smooth: true,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            }
        }]
    };

      $("#nea_zoushi").css("width",document.body.clientWidth-20);
      myChart.clear();
      myChart.setOption(option1);
      myChart.resize();
    }
}

function calculateMA(dayCount, data) {
    var result = [];
    for (var i = 0, len = data.length; i < len; i++) {
        if (i < dayCount) {
            result.push('-');
            continue;
        }
        var sum = 0;
        for (var j = 0; j < dayCount; j++) {
            sum += data[i - j][1];
        }

        result.push((sum / dayCount).toFixed(2));
    }
    return result;
}

var w=$(window).width();
var sw=$(".sidebar").width()
zoomCompute(w,sw);

<?php
if($this->context->curUserIsAdmin){
?>
myChart.on('click', function (params) {
    if(params.seriesType==='candlestick'){
      var index=params.value[0];
      $('#neazoushi-id').val(rawData[index][8]);
      $('#neazoushi-data_date').val(rawData[index][0]);
      $('#neazoushi-data_open').val(rawData[index][2]);
      $('#neazoushi-data_close').val(rawData[index][3]);
      $('#neazoushi-data_lowest').val(rawData[index][5]);
      $('#neazoushi-data_highest').val(rawData[index][4]);
      $('#neazoushi-data_base').val(rawData[index][1]);
      $('#neazoushi-data_amount').val(rawData[index][6]);
      if(rawData[index][7]){
        $('#neazoushi-is_fenhong_point').prop('checked',true);
      }else{
        $('#neazoushi-is_fenhong_point').prop('checked',false);
      }

      $('#editkline').modal();
    }
});
<?php
}
?>

$(window).resize(function(){
  var w=$(window).width();
  var sw=$(".sidebar").width()
    zoomCompute(w,sw);
});
$(".sidebar-toggle").click(function(){
  var sw=$(".main-sidebar").width();
  if(sw<100){
    //准备扩展侧边条
    var w=$(window).width();
    zoomCompute(w,230);

  }else{
    //准备缩收侧边条
    var w=$(window).width();
    zoomCompute(w,50);

  }

});

<?php $this->endBlock() ?>
<?php $this->registerJs($this->blocks['echartsdraw'],\yii\web\View::POS_END); ?>
